<template>
  <div style="width: 100%;">
    <div class="onebox">
      <div class="index_one ">
        <div class="index_one_top index_part_title">
          <i class="el-icon-s-custom"></i>
          <span>注册量</span>
          <i class="el-icon-refresh refresh" @click="refresh"></i>
        </div>
        <div class="index_one_bottom" @click="$router.push('/index/user')">
          <p>{{data['总注册量']}}</p>
          <p>总注册量
            <span v-if="data['注册量日同比'] == '昨日0'">{{data['注册量日同比']}}</span>
            <span v-else>同日比 <b>{{data['注册量日同比']}}</b> <i :class="[Number(data['注册量日同比']) > 0 ?'el-icon-caret-top':'el-icon-caret-bottom']" /></span>
          <p><span>今日注册</span> {{data['今日注册量']}}</p>
        </div>
      </div>
     
      <div class="index_one">
        <div class="index_one_top index_part_title">
          <i class="el-icon-s-custom"></i>
          <span>订单量</span>
          <i class="el-icon-refresh refresh" @click="refresh"></i>
        </div>
        <div class="index_one_bottom" @click="$router.push('/index/order')">
          <p>{{data['总订单量']}}</p>
          <p>总订单量
            <span v-if="data['订单量日同比'] == '昨日0'">{{data['订单量日同比']}}</span>
            <span v-else>同日比 <b>{{data['订单量日同比']}}</b> <i :class="[Number(data['订单量日同比']) > 0 ?'el-icon-caret-top':'el-icon-caret-bottom']" /></span>
          <p><span>今日订单量</span> {{data['今日订单量']}}</p>
        </div>
      </div>
      <div class="index_one">
        <div class="index_one_top index_part_title">
          <i class="el-icon-s-custom"></i>
          <span>其他产品</span>
          <i class="el-icon-refresh refresh" @click="refresh"></i>
        </div>
        <div class="index_one_bottom" @click="$router.push('/index/user/money')">
          <p>{{data['总营业额']}}</p>
          <p>总营业额
            <span v-if="data['营业额同比'] == '昨日0'">{{data['营业额同比']}}</span>
            <span v-else>同日比 <b>{{data['营业额同比']}}</b>
              <i :class="[Number(data['营业额同比']) > 0 ?'el-icon-caret-top':'el-icon-caret-bottom']" /></span>
            &nbsp &nbsp
            <span>客单价 <b style="color:#2fbe6b">{{data['营业额客单价']}}</b></span>
          </p>
          <p><span>今日营业额</span> {{data['今日营业额']}}</p>
        </div>
      </div>
    </div>
    <div class="onebox">
         <div class="index_one">
        <div class="index_one_top index_part_title">
          <i class="el-icon-s-custom"></i>
          <span>会员量</span>
          <i class="el-icon-refresh refresh" @click="refresh"></i>
        </div>
        <div class="index_one_bottom" @click="$router.push('/index/user')">
          <p>{{data['总会员量']}}</p>
          <p>总会员量
            <span v-if="data['会员量日同比'] == '昨日0'">{{data['会员量日同比']}}</span>
            <span v-else>同日比 <b>{{data['会员量日同比']}}</b> <i :class="[Number(data['会员量日同比']) > 0 ?'el-icon-caret-top':'el-icon-caret-bottom']" /></span>

            &nbsp &nbsp
            <span>转化率 <b>{{data['会员量转化率']}}</b> <i :class="[Number(data['会员量转化率']) > 0 ?'el-icon-caret-top':'el-icon-caret-bottom']" /></span>
          <p><span>今日会员量</span> {{data['今日会员量']}}</p>
        </div>
      </div>
      <!-- 广告劵今日营业额
    广告劵总营业额
广告劵营业额同比
    广告劵营业额客单价

    广告劵今日订单量
    广告劵总订单量
    广告劵订单量日同比 -->
      <div class="index_one ">
        <div class="index_one_top index_part_title">
          <i class="el-icon-s-custom"></i>
          <span>旅游劵营业额</span>
          <i class="el-icon-refresh refresh" @click="refresh"></i>
        </div>
        <div class="index_one_bottom">
          <p>{{data['广告劵总营业额']}}</p>
          <p>总营业额
            <span style="margin-right:10px">客单价{{data['广告劵营业额客单价']}}</span>
            <span v-if="data['广告券营业额同比'] == '昨日0'">{{data['广告券营业额同比']}}</span>
            <span v-else>同日比 <b>{{data['广告券营业额同比']}}</b> <i :class="[Number(data['广告券营业额同比']) > 0 ?'el-icon-caret-top':'el-icon-caret-bottom']" /></span>
          <p><span>今日营业额</span> {{data['广告劵今日营业额']}}</p>
        </div>
      </div>

      <div class="index_one ">
        <div class="index_one_top index_part_title">
          <i class="el-icon-s-custom"></i>
          <span>旅游劵订单量</span>
          <i class="el-icon-refresh refresh" @click="refresh"></i>
        </div>
        <div class="index_one_bottom">
          <p>{{data['广告劵总订单量']}}</p>
          <p>总订单量
            <span v-if="data['广告劵订单量日同比'] == '昨日0'">{{data['广告劵订单量日同比']}}</span>
            <span v-else>同日比 <b>{{data['广告劵订单量日同比']}}</b> <i :class="[Number(data['广告劵订单量日同比']) > 0 ?'el-icon-caret-top':'el-icon-caret-bottom']" /></span>
          <p><span>今日订单量</span> {{data['广告劵今日订单量']}}</p>
        </div>
      </div>
    </div>
	<div class="onebox">
	  <div class="index_one ">
		<div class="index_one_top index_part_title">
		  <i class="el-icon-s-custom"></i>
		  <span>权益包营业额</span>
		  <i class="el-icon-refresh refresh" @click="refresh"></i>
		</div>
		<div class="index_one_bottom">
		  <p>{{data['权益包总营业额']}}</p>
		  <p>总营业额</p>
		  <p><span>今日营业额</span> {{data['权益包今日营业额']}}</p>
		</div>
	  </div>
	  
	    <div class="index_one ">
	  	<div class="index_one_top index_part_title">
	  	  <i class="el-icon-s-custom"></i>
	  	  <span>权益包剩余待释放</span>
	  	  <i class="el-icon-refresh refresh" @click="refresh"></i>
	  	</div>
	  	<div class="index_one_bottom">
	  	  <p>{{data['权益包待释放']}}</p>
	  	  <p>总业绩</p>
	  	  <p><span>今日权益包待释放</span> {{data['今日权益包待释放']}}</p>
	  	</div>
	    </div>
	</div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  components: {},
  methods: {
    refresh() {
      this.$bus.$emit("refresh", "mail");
    },
  },
};
</script>
<style lang="less" scoped>
.onebox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
}
.index_one:not(:last-child) {
  margin-right: 15px;
}
.el-icon-caret-top {
  color: #ed4014 !important;
}
.el-icon-caret-bottom {
  color: #2fbe6b !important;
}

.index_one {
  flex: 1;
  border-radius: 5px;
  background-color: #ffffff;
  -moz-box-shadow: 0px 5px 20px #e4e4e4;
  -webkit-box-shadow: 0px 5px 20px #e4e4e4;
  box-shadow: 0px 5px 20px #e4e4e4;
  // .index_one_top {
  //     width: 100%;
  //     height: 50px;
  //     border-bottom: 1px solid #e8eaec;
  //     display: flex;
  //     flex-wrap: nowrap;
  //     justify-content: flex-start;
  //     align-items: center;
  //     padding: 0 15px;
  //     > i:nth-of-type(1) {
  //         color: #1890ff;
  //         background-color: #e6f7ff;
  //         border-radius: 50%;
  //         padding: 4px;
  //         font-size: 18px;
  //         margin-right: 10px;
  //     }
  //     > span {
  //         font-size: 16px;
  //         margin-right: auto;
  //         font-weight: bold;
  //     }
  // }
  .index_one_bottom {
    width: 100%;
    height: 140px;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 15px;
    > p:nth-of-type(1) {
      font-size: 30px;
      font-weight: 400;
      height: 60px;
      line-height: 70px;
    }
    > p:nth-of-type(2) {
      width: 100%;
      font-size: 15px;
      height: 30px;
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-end;
      align-items: center;
      padding-bottom: 10px;
      color: #212121;
      > span {
        font-size: 14px;
        color: #515a6e;
      }
      > span:nth-of-type(1) {
        margin-left: auto;
        // margin-right: 20px;
        i {
          color: #ed4014;
        }
      }
      > span:nth-of-type(2) {
        i {
          color: #2fbe6b;
        }
      }
    }
    > p:nth-of-type(3) {
      width: 100%;
      color: #8c8c8c;
      flex: 1;
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      border-top: 1px solid #e8eaec;
      > span:nth-of-type(1) {
        margin-right: auto;
      }
    }
  }
}
</style>
